<template>
	<div id="viewDiv" class="h-screen w-full"></div>
</template>

<script setup>
	import { onMounted } from 'vue'
	
	import geosceneConfig from '@geoscene/core/config'
	import Map from '@geoscene/core/Map'
	import MapView from '@geoscene/core/views/MapView'
	
	import ScaleBar from '@geoscene/core/widgets/ScaleBar'
	import Legend from '@geoscene/core/widgets/Legend'
	
	import Graphic from '@geoscene/core/Graphic.js'
	import GraphicsLayer from '@geoscene/core/layers/GraphicsLayer'	
	
	//geosceneConfig.assetsPath = './assets'
	let view, map
	
	onMounted(() => {
	  map = new Map({	    
		basemap: "tianditu-image",
		//basemap: "tianditu-vector",	   
	  });
	  
	  const graphicsLayer = new GraphicsLayer();
	  map.add(graphicsLayer);
	  
	  const point = { //Create a point
	      type: "point",
	      longitude: 116.80657463861,
	      latitude: 39.0005930608889
	  };
	  const simpleMarkerSymbol = {
	      type: "simple-marker",
	      color: [226, 119, 40], 
	      outline: {
	          color: [255, 255, 255], 
	          width: 1
	      }
	  };
	  const pointGraphic = new Graphic({
		  geometry: point,
		  symbol: simpleMarkerSymbol
	  });
	  graphicsLayer.add(pointGraphic);
	  
	  // Create a line geometry
	  const polyline = {
	      type: "polyline",
	      paths: [
	          [116.821527826096, 39.0139576938577], //经度，纬度
	          [116.814893761649, 39.0080602407843], //经度，纬度
	          [116.808878330345, 39.0016642996246] //经度，纬度
	      ]
	  };
	  const simpleLineSymbol = {
	      type: "simple-line",
	      color: [226, 119, 40], 
	      width: 2
	  };
	  const polylineGraphic = new Graphic({
	      geometry: polyline,
	      symbol: simpleLineSymbol
	  });
	  graphicsLayer.add(polylineGraphic);
	  
	  // Create a polygon geometry
	  const polygon = {
	      type: "polygon",
	      rings: [
	          [116.818984489994, 39.0137559967283], //经度，纬度
	          [116.806796597377, 39.0215816298725], //经度，纬度
	          [116.791432890735, 39.0163883241613], //经度，纬度
	          [116.79596686535, 39.008564864635], //经度，纬度
	          [116.808558110679, 39.0035027131376] //经度，纬度
	      ]
	  };	  
	  const simpleFillSymbol = {
	      type: "simple-fill",
	      color: [227, 139, 79, 0.8],
	      outline: {
	          color: [255, 255, 255],
	          width: 1
	      }
	  };
	  const popupTemplate = {
	      title: "{Name}",
	      content: "{Description}"
	  }
	  const attributes = {
	      Name: "Graphic",
	      Description: "I am a polygon"
	  }
	  const polygonGraphic = new Graphic({
	      geometry: polygon,
	      symbol: simpleFillSymbol,
		  attributes: attributes,
		  popupTemplate: popupTemplate
	  });
	  graphicsLayer.add(polygonGraphic);
	  
	  
	  const view = new MapView({
	      map: map,
	      center: [116.8,39], // Longitude, latitude
	      zoom: 13, // Zoom level
	      container: "viewDiv" // Div element
	  });
	  
	  const scalebar = new ScaleBar({
	      view: view  
	  });	  
	  view.ui.add(scalebar, "bottom-left");
	  
	  const legend = new Legend ({
	      view: view
	  });
	  view.ui.add(legend, "top-right");
	  
	})
</script>

<style scoped>
	/* @import "https://js.geoscene.cn/4.29/@geoscene/core/assets/geoscene/themes/light/main.css"; */
	html,
	body,
	#viewDiv {
		padding: 0;
		margin: 0;
		height: 100%;
		width: 100%;
	}
</style>